<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="HandheldFriendly" content="True">
    <!-- <meta name="MobileOptimized" content="600"> -->
    <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="cleartype" content="on">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="format-detection" content="telephone=no" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="icon" href="favicon.ico">
    <title>personal-resume</title>
    <style>
        .app_loading {
          position: fixed;
          height: 100vh;
          width: 100vw;
          top: 0;
          left: 0;
          background: #0c0d22 url('');
          opacity: 1;
          transition: opacity 1s;
          z-index: 9999;
          pointer-events: none;
        }
    
        .text_box span {
          color: #eff1f2;
          display: block;
          position: absolute;
          left: 50vw;
          top: 50vh;
          transform: translate(-50%, -50%);
        }
    
        .text_box div {
          position: absolute;
          left: 50vw;
          top: 50vh;
          transform: translate(-50%, -50%);
          border-radius: 50%;
          border: 1px solid #fff;
          opacity: 0;
        }
    
        .text_box div:nth-of-type(1) {
          width: 25vh;
          height: 25vh;
          animation: box_fade 3s 0s ease-in infinite;
        }
    
        .text_box div:nth-of-type(2) {
          width: 45vh;
          height: 45vh;
          animation: box_fade 3s .4s ease-in infinite;
        }
    
        .text_box div:nth-of-type(3) {
          width: 65vh;
          height: 65vh;
          animation: box_fade 3s .8s ease-in infinite;
        }
    
        .text_box div:nth-of-type(4) {
          width: 85vh;
          height: 85vh;
          animation: box_fade 3s 1.2s ease-in infinite;
        }
    
        @keyframes box_fade {
          0% {
            opacity: 0;
          }
          30% {
            opacity: .5;
          }
          60% {
            opacity: 0;
          }
          100% {
            opacity: 0;
          }
        }
    
        .starline {
          position: absolute;
          left: 0;
          right: 0;
          bottom: 0;
          top: 0;
          /* background: pink; */
        }
    
        .starline div {
          position: absolute;
          width: 100px;
          height: 2px;
          border-radius: 1px;
          background-image: -webkit-linear-gradient(right, rgba(225, 225, 225, 0), rgba(225, 225, 225, 1));
        }
    
        .starline div:nth-child(1) {
          top: -10px;
          right: -30px;
          animation: xmove 12s ease-out infinite;
          transform: rotateZ(-45deg) translate3d(-0, 0, 0);
        }
    
        @keyframes xmove {
          to {
            transform: rotateZ(-45deg) translate3d(-800px, 0, 0)
          }
        }
    
        .starline div:nth-child(2) {
          top: 200px;
          right: -120px;
          animation: ymove 8s ease-out infinite;
          transform: rotateZ(-45deg) translate3d(-0, 0, 0);
        }
    
        @keyframes ymove {
          to {
            transform: rotateZ(-45deg) translate3d(-800px, 0, 0)
          }
        }
    
        .starline div:nth-child(3) {
          top: 100px;
          right: -100px;
          animation: zmove 16s ease-out infinite;
          transform: rotateZ(-45deg) translate3d(-0, 0, 0);
        }
    
        @keyframes zmove {
          to {
            transform: rotateZ(-45deg) translate3d(-800px, 0, 0)
          }
        }
    </style>
  <link href="0-1.0-1565520426229.js" rel="prefetch"><link href="1-1.0-1565520426229.js" rel="prefetch"><link href="app-1.0-1565520426229.js" rel="preload" as="script"></head>
  <body>
    <noscript>
      <strong>We're sorry but res doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <div class="app_loading">
        <div class="text_box">
            <span>loading...</span>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div class="starline">
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
    <script src="./js/rem.js"></script>
    <script src="./js/three.js"></script>
    <script src="./js/tween.min.js"></script>
    <script src="./js/swiper.animate.min.js"></script>
    <!-- <script src="http://api.map.baidu.com/getscript?v=2.0&ak=WcqaWwFEb4fO6sXZTOQwMCi4GKefwS4F&s=1"></script> -->
  <script type="text/javascript" src="app-1.0-1565520426229.js"></script></body>
</html>
